<template>
  <div ref="print">
        <!-- <img src="@/assets/logo/pdfbg.png" alt="" /> -->
        <div
          class="A4pageP"
           id="pdfDomD"
          v-for="(item, index) in listData"
          :key="index + 10220"
        >
          <img src="@/assets/logo/pdfbg.png" alt="" />
          <div class="pagesContent">
            <div class="pagesContentItem">
              <div class="pagesContentTitle">
                <span>培训学时证明</span>
              </div>
              <div class="pagesContentitemRocer">
                {{ qyType("qianan") ? "" : item.company
                }}{{ item.nickname }}同志{{
                  qyType("lapengfei") && qyType("zzpx") ? "于" : ""
                }}{{
                  qyType("guoyue") && qyType("lapengfei") && qyType("zzpx")
                    ? !qyType("putai") && item.gz == "一般工贸"
                      ? item.grade_info.start_time + "——"
                      : item.start_time + "——"
                    : ""
                }}
                <!-- start_time -->
                {{
                  qyType("lapengfei") && qyType("zzpx")
                    ? item.score_finish_time
                    : ""
                }}完成线上学习{{
                  qyType("qianan") ? "要求" : "课程"
                }}。特发此证，以此证明。
              </div>
              <div
                class="pagesContentitemInfor"
                v-if="!qyType('lapengfei') || !qyType('zzpx')"
              >
                <ul>
                  <li class="Title">姓名</li>
                  <i>:</i>
                  <li class="Name">{{ item.nickname }}</li>
                </ul>
                <!-- <ul>
                  <li class="Title">性别</li>
                  <i>:</i>
                  <li class="Name">{{ item.gender }}</li>
                </ul> -->
                <ul>
                  <li class="Title">身份证号</li>
                  <i>:</i>
                  <li class="Name">{{ item.username }}</li>
                </ul>
                <ul>
                  <li class="Title">培训科目</li>
                  <i>:</i>

                  <li v-if="$route.meta.title == '安全管理'" class="Name">
                    {{ item.subjectTitleFull }}
                  </li>
                  <li v-else class="Name">{{ item.subjectTitle }}</li>
                </ul>
                <ul v-if="!qyType('ataq')||!qyType('bosheng')||!qyType('guohua')||!qyType('qiye')||!qyType('lcakzx')||!qyType('changli')">
                  <li class="Title">公司名称</li>
                  <i>:</i>
                  <li class="Name">{{ item.company }}</li>
                </ul>
                <ul v-if="!qyType('changli')&&$route.meta.title == '职业卫生'">
                  <li class="Title">有效期</li>
                  <i>:</i>
                  <li class="Name">一年</li>
                </ul>
                <!--       :src="item.exam_face" -->
                <div
                  class="imgBox"
                  v-if="
                    !qyType('putai') ||
                    !qyType('gyaq') ||
                    !qyType('jingkun') ||
                    !qyType('zaah') ||
                    !qyType('hshx') ||
                    !qyType('yyzhongtai') ||
                    !qyType('bbxdf') ||
                    !qyType('hwzj') ||
                    !qyType('changli')
                    
                  "
                >
                  <div style="margin-right: 20px" v-if="item.face">
                    <div>
                      <img :src="item.face" alt="" />
                    </div>
                    <p>人脸底片</p>
                  </div>

                  <div
                    v-if="item.exam_face && qyType('jingkun') && qyType('hwzj') && qyType('dkaq')"
                  >
                    <div>
                      <img :src="item.exam_face" alt="" />
                    </div>
                    <p>考试照片</p>
                  </div>
                </div>
              </div>
              <div class="pagesContentitemXs">
                <span class="pagesContentitemXsSpan"
                  >培训内容：{{ qyType('bosheng')&&item.gz == '燃气从业人员培训'?'燃气经营企业从业人员继续教育':'' }} 合计{{ item.score_sum }}学时</span
                >
                <div class="tableBox" v-if="qyType('ansheng')">
                  <div
                    :class="
                      index % 2 == 0
                        ? item.score_loglist.length % 2 == 0
                          ? index == item.score_loglist.length - 2
                            ? 'table beforeBorder bottomBorder'
                            : 'table beforeBorder'
                          : index == item.score_loglist.length - 1
                          ? 'table beforeBorder bottomBorder'
                          : 'table beforeBorder'
                        : item.score_loglist.length % 2 == 0
                        ? index == item.score_loglist.length - 1
                          ? 'table bottomBorder'
                          : 'table'
                        : index == item.score_loglist.length - 2
                        ? 'table bottomBorder'
                        : 'table'
                    "
                    v-for="(itemA, index) in item.score_loglist"
                    :key="itemA.msid"
                  >
                    <p>{{ itemA.mstitle?itemA.mstitle:itemA.title }}{{itemA.kind&&itemA.kind=='选学'?'(选学)':''}}</p>
                    <span>{{ itemA.score }}学时</span>
                  </div>
                </div>
              </div>
              <div
                class="pagesContentitemFs"
                v-if="
                  ((item.gz == '一般工贸' ||
                    item.gz == '职业卫生' ||
                    item.gz == '一般工贸2') &&
                    qyType('ansheng')) ||
                  item.gz == '全员培训' || (!qyType('donggang')&&item.gz=='大培训')||!qyType('zeneng')
                  || (item.gz=='安全管理'&&!qyType('jianda'))
                "
              >
                <div>
                  <p v-if="!qyType('donggang')||!qyType('zeneng')||!qyType('jianda')">考试成绩</p>
                  <p v-else>{{$route.meta.title == '职业卫生'&&!qyType('ataq')?'职业卫生':''+ item.subjectTitle }}培训考试题库(80分及格)</p>
                  <span>{{ item.score ? item.score : 0 }}分</span>
                </div>
              </div>
              <div
                class="pagesContentitemInfor"
                v-if="qyType('lapengfei') && qyType('zzpx')"
              >
                <ul>
                  <li class="Title">姓名</li>
                  <i>:</i>
                  <li class="Name">{{ item.nickname }}</li>
                </ul>
                <ul v-if="qyType('ansheng')">
                  <li class="Title">性别</li>
                  <i>:</i>
                  <li class="Name">{{ item.gender }}</li>
                </ul>
                <ul>
                  <li class="Title">身份证号</li>
                  <i>:</i>
                  <li class="Name">{{ item.username }}</li>
                </ul>
                <ul>
                  <li class="Title">培训科目</li>
                  <i>:</i>

                  <li v-if="$route.meta.title == '安全管理'" class="Name">
                    {{ item.subjectTitleFull }}
                  </li>
                  <li
                    v-else-if="
                      $route.meta.title == '职业卫生' && (!qyType('zhengyuan')||!qyType('ataq'))
                    "
                  >
                    {{ item.subjectTitle }}
                  </li>
                  <li
                    v-else-if="
                      $route.meta.title == '一般工贸' && !qyType('zhengyuan')
                    "
                  >
                    非高危行业生产经营单位{{ item.subjectTitle }}
                  </li>
                  <li v-else class="Name">{{ item.subjectTitle }}</li>
                </ul>
                <ul v-if="!qyType('ataq')||!qyType('bosheng')">
                  <li class="Title">公司名称</li>
                  <i>:</i>
                  <li class="Name">{{ item.company }}</li>
                </ul>
                <ul v-if="!qyType('bosheng')&&item.gz == '燃气从业人员培训'">
                  <li class="Title">证书编号</li>
                  <i>:</i>
                  <li class="Name">{{ item.cert_number }}</li>
                </ul>
                <!--       :src="item.exam_face" -->
                <div class="imgBox" v-if="!qyType('bosheng')">
                  <div>
                    <div v-if="item.photo">
                      <img :src="item.photo" alt="" />
                    </div>
                  </div>
                </div>
                <div
                  class="imgBox"
                  v-if="
                    !qyType('putai') ||
                    !qyType('gyaq') ||
                    !qyType('jingkun') ||
                    !qyType('zaah') ||
                    !qyType('hshx') ||
                    !qyType('yyzhongtai') ||
                    !qyType('bbxdf') ||
                    !qyType('hwzj') ||
                    !qyType('dkaq') || 
                    !qyType('hshd') ||
                    !qyType('ataq')||
                    !qyType('zeneng') ||
                    !qyType('hbdl')  ||
                    !qyType('lxhg') ||
                    !qyType('jyhc') ||
                    (!qyType('guoyue')&&item.gz!='特种作业')||
                    !qyType('smkj') ||
                    !qyType('syyn')||
                    !qyType('xcaq')||
                    !qyType('changli')
                  "
                >
                  <div style="margin-right: 20px" v-if="item.face">
                    <div>
                      <img :src="item.face" alt="" />
                    </div>
                    <p>人脸底片</p>
                  </div>

                  <div
                    v-if="item.exam_face && qyType('jingkun') && qyType('hwzj')&&qyType('dkaq')&&qyType('hshd')&&qyType('ataq')"
                  >
                    <div>
                      <img :src="item.exam_face" alt="" />
                    </div>
                    <p v-if="!qyType('jyhc')">学习照片</p>
                    <p v-else>考试照片</p>
                  </div>
                </div>
              </div>
              <div class="pagesContentitemFooter">
                <div class="pagesContentitemFooterBox">
                  <div class="pagesContentitemFooterBoxLeft">
                    <p>证书编号:</p>
                    <span>{{ item.cert_num }}</span>
                  </div>
                  <!-- 二维码 -->
                  <img
                    v-if="
                      (!qyType('shuncheng') || !qyType('baosen')) &&
                      item.gz == '一般工贸'
                    "
                    class="erweima"
                    :src="erma"
                    alt=""
                  />
                  <img
                    v-if="
                      !qyType('zhengyuan')
                    "
                    class="erweima"
                    :src="item.resourceserma"
                    alt=""
                    style="left:18%;"
                  />
                  <div class="pagesContentitemFooterBoxRight">
                    <p>发证时间:</p>
                    <span>{{ item.score_finish_time }}</span>
                  </div>
                  <!--  -->
                  <div style="position: absolute;right: 68px;bottom: 40px;" v-if="!qyType('donggang')">
                    培训机构(盖章)：日照市东港职业培训学校
                  </div>
                </div>
                <!-- 印章  v-if="!qyType('whtl')"  -->
                <img
                  style="left: 50%"
                  src="@/assets/zhang/tjyx.png"
                  v-if="
                    !qyType('whtl') ||
                    !qyType('jingkun') ||
                    !qyType('bbxdf') ||
                    !qyType('tjy') ||
                    !qyType('mckx') ||
                    !qyType('zhengyuan') ||
                    !qyType('yyzhongtai') ||
                    !qyType('lapengfei') ||
                    !qyType('zzpx') ||
                    !qyType('antai') ||
                    !qyType('liming') ||
                    !qyType('hwzj') || 
                    !qyType('dkaq') ||
                    !qyType('hshd')||
                    !qyType('hbdl') ||
                    !qyType('smkj') ||
                    !qyType('syyn')||
                    !qyType('qiye')||
                    !qyType('guohua')||
                    !qyType('xcaq')
                  "
                  alt=""
                />
                <!-- <img
                  
                  src="@/assets/zhang/lyky.png"
                  v-if="!qyType('lyky') && listData[0].gz == '职业技能等级认定'"
                  alt=""
                /> -->
                <img
                  style="left: 50%"
                  src="@/assets/zhang/mtjs.png"
                  alt=""
                  v-if="!qyType('lyky') && listData[0].gz == '职业技能等级认定'"
                />
                <!-- <img style="" src="@/assets/zhang/whtl.png" alt=""> -->
                <img
                  :src="sealImgList(baseURL, listData[0].gz)"
                  alt=""
                  v-if="sealImgList(baseURL, listData[0].gz)"
                />
                <!-- <img src="@/assets/zhang/qianan.png" alt=""> -->
              </div>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            htmlTitle: '证书打印',
            fromData:{
                nickname:'',//姓名
                username:'',//身份证号
                update_time:'',//发证日期
                start_time:'',//开始时间
                score_finish_time:'',//发证日期
                gender:'',//性别
                subjectTitle:'',//培训科目
                score_loglist:[
                ],
                score_sum:0,//学时合计
                cert_num:1010011101111,//证书编号
            },
            listData:[],
            baseURL:
        process.env.NODE_ENV === "development"
          ? process.env.VUE_APP_BASE_API
          : window.location.href.slice(
              0,
              window.location.href.indexOf("/user")
            ),
        };
    },
    methods: {
        open(item){
            this.dialogVisible = true
            Object.assign(this.fromData,item)
            this.listData=[this.fromData]
        },
    },
}
</script>
<style lang="scss" scoped>
.A4pageP {
  width: 595px;  //calc(595.28px * 2)
  height:842px ;//calc(846.1px * 2)
  // width:calc(595px * 1.5);
  // height:calc(840px * 1.5); 
  // background:url('~@/assets/logo/pdfbg.png') no-repeat;
  // background-size: 100%;
  overflow: hidden;
  color: #000;
  position: relative;
  top: 0;
  left: 0;
  & > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 30;
  }
  .pagesContent {
    position: absolute;
    top: 0;
    z-index: 10000000;
    width: 100%;
    height: 100%;
    padding: 22.5px 50px;
    overflow: auto;
    .pagesContentItem {
      height: calc(100%);
      .pagesContentTitle {
        width: 100%;
        height: 65px;
        // background: #fff;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        span {
          font-size: 20px;
        }
      }
      .pagesContentitemRocer {
        font-size: 12px;
        text-indent: 24px;
        min-height: 40px;
        // background: #fff;
      }
      .pagesContentitemXs {
        // background: #0f0;
        height: 415px;
        .pagesContentitemXsSpan {
          font-size: 10px;
        }
        .table {
          // border:1px solid #333;
          height: 35px;
          width: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid #333;
          &::after {
            content: "";
            height: 35px;
            width: 1px;
            background: #333;
          }
          p {
            // padding: 0 10px;
            margin: 0;
            width: 100%;
            transform: scale(0.9);
            line-height: 1.2;
            // font-size: 20px;
          }
          span {
            display: flex;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            width: 60px;
            height: 100%;
            align-items: center;
            border-left: 1px solid #333;
          }
        }
        .tableBox {
          display: flex;
          padding: 10px 0;
          flex-wrap: wrap;
          .beforeBorder {
            &::before {
              content: "";
              height: 35px;
              width: 1px;
              background: #333;
            }
          }
          .bottomBorder {
            border-bottom: 1px solid #333;
          }
          p{
            font-size: 12px;
          }
          span{
            font-size: 14px;
          }
        }
      }
      .pagesContentitemFs {
        margin-bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        div {
          // border:1px solid #333;
          height: 25px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-top: 1px solid #333;
          border-bottom: 1px solid #333;
          border-left: 1px solid #333;
          &::after {
            content: "";
            height: 25px;
            width: 1px;
            background: #333;
          }
          p {
            text-align: center;
            padding: 0 10px;
            margin: 0;
            flex: 1;
            font-size: 10px;
          }
          span {
            display: flex;
            justify-content: center;
            font-size: 10px;
            font-weight: 600;
            width: 40%;
            height: 100%;
            align-items: center;
            border-left: 1px solid #333;
          }
        }
      }
      .pagesContentitemInfor {
        position: relative;
        padding-left: 25px;
        margin-bottom: 10px;
        height: 140px;
        ul {
          line-height: 25px;
          display: flex;
          font-size: 12px;
          font-family: "黑体";
          margin: 0;
          .Title {
            width: 55px;
            text-align: justify;
          }
        }
        .imgBox {
          position: absolute;
          right: 0;
          top: 10px;
          width: 250px;
          // height: 180px;
          display: flex;
          justify-content: flex-end;
          & > div {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            & > div {
              display: flex;
              justify-content: center;
              align-items: center;
              height: 80px;
              border: 1px solid #eee;
              & > img {
                max-width: 120px;
                max-height: 100%;
              }
            }
            & > p {
              margin: 0;
              margin-top: 10px;
            }
          }
        }
      }

      .pagesContentitemFooter {
        height: 75px;
        // background: #00f;
        padding: 0 25px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        font-size: 12px;
        position: relative;
        .pagesContentitemFooterBox {
          width: 100%;
          // background: #0ff;
          display: flex;
          justify-content: space-between;
          font-family: "黑体";
          font-weight: 600;
          .erweima {
            position: absolute;
            width: 60px;
            height: 60px;
            bottom: 22%;
            left: 5%;
          }
          .pagesContentitemFooterBoxLeft {
            display: flex;
            align-items: center;
            p {
              margin: 0;
            }
          }
          .pagesContentitemFooterBoxRight {
            display: flex;
            align-items: center;
            min-width: 150px;
            p {
              margin: 0;
            }
          }
        }
        & > img {
          position: absolute;
          height: 100px;
          width: 100px;
          left: 75%;
          top: 15%;
          z-index: -1;
        }
      }
    }
  }
}
</style>